<template>
	<view>
		<uni-nav-bar
			statusBar="true" 
			:fixed="true" 
			:border="false" 
			bgcolor="#324c6b"
			backgroundColor="#324c6b">
				<view class="nav-bar-title" slot="middle">
					<text></text>
					<view>
						{{i18n.transaction}}
					</view>
					<text @tap.stop="historys">{{i18n.Commission_record}}</text>
				</view>
			</uni-nav-bar>
		<view class="trans-top">
					<view class="trans-top-title">
						<view class="trans-top-li" @tap.stop="selectCur">
							<image src="../../static/imgs/setting.png" mode="widthFix" lazy-load></image>
							<view>{{curInfo.title_en}}/{{curInfo.y_title_en}}</view>
							<!-- <text class="red">-2.3%</text> -->
						</view>
						<view class="trans-top-li">
							<image src="../../static/imgs/polyline.png" mode="widthFix" lazy-load></image>
						</view>
					</view>
					<view class="trans-top-content">
						<view class="trans-top-l">
							
							<view class="trans-top-l-nav">
								<view class="trans-top-l-nav-item" :class="{'active':buyIndex==0}" @tap.stop="selectNav('0')">{{i18n.Buy_in}}</view>
								<view class="trans-top-l-nav-item" :class="{'active':buyIndex==1}" @tap.stop="selectNav('1')">{{i18n.Sell}}</view>
							</view>
							
						<!-- 	<view class="pick-nav">
								<view>市场委托</view>
								<i class="icon iconfont icon-sanjiaoxia"></i>
							</view> -->
							<!-- <view class="pick-nav pick-nav-num">
								<input type="text" value="" v-model="price" placeholder="价格"/>
								<button @tap.stop="add">+</button>
								<button @tap.stop="lower">-</button>
							</view>
							<view class="pick-nav pick-tips">
								≈{{price || 0}}USDT
							</view> -->
							<view class="pick-nav">
								<input type="text" value="" :placeholder="i18n.number_" v-model="num" @input="inputnum"/>
								<text>{{curInfo.title_en || '-'}}</text>
							</view>
							
							
							
							<view class="pick-nav">
								<input type="text" value="" :placeholder="i18n.number_" v-model="cnum" @input="inputcnum"/>
								<text>{{curInfo.y_title_en || '-'}}</text>
							</view>
							<view class="pick-nav pick-tips">
								{{i18n.Available}}:{{token_x.balance || 0}}{{curInfo.title_en}}
							</view>
							<view class="pick-nav pick-tips">
								{{i18n.Available}}:{{token_y.balance || 0}}{{curInfo.y_title_en}}
							</view>
							
							
							<view class="sliderBox-content">
								<view class="rowBox mrg50T">
									<view class="sliderBox">
										<!-- <RangeSlider
											:width="slideWidth"
											:height="slideHeight"
											:blockSize="slideBlockSize"
											:min="slideMin"
											:max="slideMax"
											:values="rangeValues"
											:step="step"
											:liveMode="isLiveMode"
											@rangechange="onRangeChange"
										> -->
											<!-- <view slot="minBlock" class="range-slider-block"></view> -->
											<!-- 左边滑块的内容 -->
											<!-- <view slot="maxBlock" class="range-slider-block"></view> -->
											<!-- 右边滑块的内容 -->
										</RangeSlider>
									</view>
								</view>
								<!-- <view class="text-center mrg10T">
									<text>区间：</text>
									<text>{{ rangeValues[0] }}</text>
									<text>~</text>
									<text>{{ rangeValues[1] }}%</text>
								</view> -->
							</view>
							<view class="pick-nav pick-tips">
								{{i18n.Transaction_amount}}:{{num || '0'}}{{curInfo.title_en || '-'}}
							</view>
							<view class="transaction-btn">
								<button class="" :class="[buyIndex==0?'color-green':'color-red']" @tap.stop="comfirm">
									{{buyIndex==1?i18n.Sell:i18n.Buy_in}}{{curInfo.title_en || '-'}}
								</button>
							</view>
							
						</view>
						<view class="trans-top-r">
							<view class="trans-top-r-content">
								<text>{{i18n.Handicap}}</text><text>{{i18n.price}}</text><text>{{i18n.number_}}</text>
							</view>
							<block v-for="(item,index) in curInfo.sell" :key="index">
								<view class="trans-top-r-li">
									<text>{{i18n.Sell__}}{{curInfo.sell.length-index}}</text><text>{{item.price}}</text><text class="_black">{{item.num}}</text>
									<view class="line-bg" :style="{left:item.bl+'%'}"></view>
								</view>
							</block>
						<!-- 	<view class="trans-top-r-title">
								<view>10806</view>
								<text>≈75317.82CNY</text>
							</view> -->
							<block v-for="(item,index) in curInfo.buy" :key="index">
								<view class="trans-top-r-li trans-top-r-li-buy">
									<text>{{i18n.Sell__}}{{curInfo.buy.length-index}}</text><text>{{item.price}}</text><text class="_black">{{item.num}}</text>
									<view class="line-bg" :style="{left:item.bl+'%'}"></view>
								</view>
							</block>
						</view>
					</view>
					
					<view class="transaction-bottom">
						<view class="transaction-bottom-title">
							<view class="">
								{{i18n.Historical_commission}}
							</view>
							<!-- <view class="">
								<text>全部</text>
								<image src="../../static/imgs/more-menu.png" mode="widthFix" lazy-load></image>
							</view> -->
						</view>
						<template v-if="historylist.length>0">
						<block v-for="(item,index) in historylist" :key="index">
							<view class="transaction-bottom-li-title">
								{{item.typeStr}}/{{item.hash}}
							</view>
							<view class="transaction-bottom-list">
								<view class="transaction-bottom-list-l">
									<view>{{item.typeStr || '-'}}{{i18n.Commission_price}}</view>
									<text>{{item.price_x || '-'}}</text>
									<view>{{item.hash || '-'}}{{i18n.Commission_price}}</view>
									<text>{{item.price_y || '-'}}</text>
								</view>
								<view class="transaction-bottom-list-l">
									<view>{{i18n.Commission}}</view>
									<text>{{item.amount || 0}}</text>
									<view>{{i18n.Commission}}</view>
									<text>{{item.num || 0}}</text>
								</view>
								<view class="transaction-bottom-list-r">
									<view>{{i18n.HandlingFee}}</view>
									<text>{{item.poundage || '-'}}</text>
									<view>{{i18n.Commission_time}}</view>
									<text>{{item.time || '-'}}</text>
									
								</view>
							</view>
						</block>
							<view class="nodata" v-if="nomore" @tap.stop="historys">
								<text class="see-more">{{i18n.see_more}}>></text>
							</view>
						</template>
						<template v-else>
							<view class="nodata">
								<image src="../../static/imgs/nodata.png" mode="widthFix" lazy-load></image>
								<text>{{i18n.nodata}}</text>
							</view>
						</template>
						
					</view>
				</view>		
				<pay-pwd
				:maxlength="6" 
				:isPwd="true" 
				:isSHow="showpwd" 
				:isShows="isshows"
				:isShowss="showss"
				@close="close"
				@input-again="inputAgain"
				@finish="finish"></pay-pwd>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import RangeSlider from '../../components/range-slider/range-slider.vue';
	import {fetch, showToast, pageto, forceUpdate, check_login, _updataTabBar} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	import payPwd from '@/components/pay-pwd/pay-pwd.vue';
	export default {
		components:{
			uniNavBar,RangeSlider,payPwd
		},
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang',
				'getTransactionCur'
			])
		},
		data() {
			return {
				showpwd:false,
				isshows:false,
				showss:false,
				num:'',
				cnum:'',
				price:'',
				rangeValues: [0, 0],
				slideWidth: 350,
				slideHeight: 80,
				slideBlockSize: 30,
				slideMin: 0,
				slideMax: 100,
				isLiveMode: true,
				step: 1,
				//
				timeMinValue: 0,
				timeMaxValue: 100,

				buyIndex:0,
				curInfo:{
					'percentChange':'',
					'zdf':'',
					title_en:'',
					y_title_en:'',
					sell:[],
					buy:[]
				},
				list:[],
				transcationInf:{},
				wallatlist:[],
				token_x:{},
				token_y:{},
				page:1,
				historylist:[],
				nomore:false
			};
		},
		// onReachBottom(){
		// 	this.getHistory();
		// },
		onShow(){
			_updataTabBar(this.getTextArr,this.getLangType)
			this.nomore=false;
			this.price =''
			console.log(this.getTransactionCu);
			if(!this.getTransactionCur.token_x){
				this.getTokenlist()  
			}else{
				this.transcationInf=this.getTransactionCur
				// this.curInfo = {
					this.curInfo={
						title_en:this.getTransactionCur.token_x.title_en,
						y_title_en:this.getTransactionCur.token_y.title_en,
					}
					this.token_x = this.getTransactionCur.token_x
					this.token_y = this.getTransactionCur.token_y
					
					this.getList()
				// }
				this.setTransactionCur({})
				
			}
			this.page=1;this.historylist=[]
			this.getHistory();
			this.getMCheckB()
			this.indexFunc()
		},
		methods:{
			indexFunc(){
				let url = this.getRequestUrl + '/api/index/index';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					this.showLoad = false;
					if(res.data.code == 1){
						
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}else if(res.data.code ==3){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}else{
						showToast(res.data.msg)
					}
				}).catch(err=>{
					this.showLoad = true;
				})
			},
			getMCheckB(){
					let _url = this.getRequestUrl+'/api/Wallet/check_b';
					let _data ={
						id:this.getLoginInfo.id,
						token:this.getLoginInfo.token
					}
					fetch(_url,_data,'POST').then(res=>{
						
					})
				},
			historys(){
				uni.navigateTo({
					url:'./history'
				})
			},
			inputnum(val){
				// console.log(this.token_x.price);
				// console.log(this.token_y.price);
				// console.log(val.detail.value);
				if(val.detail.value){
					this.cnum = (parseInt(Number(val.detail.value)*(Number(this.token_x.price)/Number(this.token_y.price))*100000000)/100000000).toFixed(8)
				}else{
					this.cnum = ''
				}
				
				
			},
			inputcnum(val){
				if(val.detail.value){
				this.num = (parseInt(Number(val.detail.value)*(Number(this.token_y.price)/Number(this.token_x.price))*100000000)/100000000).toFixed(8)
				}else{
					this.num = ''
				}
				
				// console.log(val.detail.value,'cnum');
			},
			close(val){
				if(val==1){
					this.isshows = false;
					this.showss = false;
					this.showpwd = false;
				}else{
					this.isshows = val;
					this.showpwd = val;
					this.showss = val
				}
			},
			inputAgain(val){
				this.isshows = false;
				this.showpwd = true;
			},
			finish(val){
				let _data ={
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					token_x: this.buyIndex == '0' ? this.token_y.id : this.token_x.id,
					token_y: this.buyIndex == '0' ? this.token_x.id : this.token_y.id,
					thenum: this.num,
					pay_pwd: val
				}
				fetch(this.getRequestUrl+"/api/Wallet/exchange2", _data, "post")
					.then(res=>{
						showToast(res.data.msg)
						if(res.data.code==1){
							this.historylist= []
							this.page=1;
							this.getHistory();
							this.getList();
						}
					})
			},
			comfirm(){
				if(!this.num){
					showToast(this.getLang==1?'请输入数量':'Please enter the quantity')
					return
				}
				// if(!this.price){
				// 	showToast('请输入价格')
				// 	return
				// }
				this.showpwd = true
			},
			getHistory(){
				// console.log(this.page)
				let _data ={
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					type: 3,
					page: this.page,
					rows: 5
				}
				fetch(this.getRequestUrl+'/api/User/detailed', _data, 'post')
					.then(res=>{
						if(res.data.code==1){
							let list = res.data.data.data.data
							if(res.data.data.data.data.length==0)return;
							if(list.length==5){
								this.nomore = true;
							}
							this.historylist = res.data.data.data.data;
							
							console.log(this.historylist);
						}
					})
					.catch(err=>{
						
					})

			},
			add(){
				this.price=Number.parseFloat((Number(this.price)+Number(0.01))).toFixed(8)
			},
			lower(){
				if(this.price<=0 || (Number(this.price)-Number(0.01))<=0)return
				this.price=Number.parseFloat((Number(this.price)-Number(0.01))).toFixed(8)
				// this.price-=0.01
			},
			...mapMutations(['setTransactionCur']),
			getTokenlist(){
				fetch(this.getRequestUrl+'/api/wallet/wallet_list',{id:this.getLoginInfo.id,token:this.getLoginInfo.token},"post")
				.then(res=>{
					if(res.data.code==1){
						let list = res.data.data.list.filter(item=>item.is_pay==1)
						this.wallatlist = list;
						
						let firstid = list[0].id
						let lastlist = list.filter(item=>item.id!=firstid);
						
						this.token_x=list[0]
						this.token_y=lastlist[0]
						this.curInfo={
							title_en:this.token_x.title_en,
							y_title_en:this.token_y.title_en,
						}
						this.getList()
						// console.log(this.topList);
						// console.log(this.bottomList);
					}
				})
			},
			selectCur(){
				uni.navigateTo({
					url:`/pages/transaction/cur-list?list=${JSON.stringify(this.wallatlist)}`
				})
			},
			getList(){
				// showToast('我在这款')
				let _this = this
				_this.showLoad = true;
				_this.curInfo.sell=[]
				_this.curInfo.buy=[]
					let _url = _this.getRequestUrl+'/api/wallet/market_dept';
					let data = {
						id:_this.getLoginInfo.id,
						token:_this.getLoginInfo.token,
						token_x:(_this.curInfo.title_en).toLowerCase(), //第一个币的名字
						token_y:(_this.curInfo.y_title_en).toLowerCase(),   // 目标币种名字
					}
					// token_x
					// uni.showLoading()
					
					let result = fetch(_url, data, "POST");
					result.then(res=>{
						// uni.hideLoading()
						_this.showLoad = false;
						// return
						if(res.data.code==1){
							if(res.data.data.asks.length==0 && res.data.data.bids.length==0)return
							let lsit1 = res.data.data.asks.slice(0,5)    //卖盘
							let lsit2 = res.data.data.bids.slice(0,5)   //买盘
			console.log(lsit1,lsit2);
							for (var i = 0; i < lsit1.length; i++) {
								let op = {
									num:lsit1[i][1],
									price:lsit1[i][0]
								}
								_this.curInfo.sell.push(op)
							}
							for (var ii = 0; ii < lsit2.length; ii++) {
								// console.log(lsit2[ii]);
								let oop = {
									num:lsit2[ii][1],
									price:lsit2[ii][0]
								}
								_this.curInfo.buy.push(oop)
							}
		
							var sellMax = _this.getMax(_this.curInfo.sell);
							var buyMax = _this.getMax(_this.curInfo.buy)
							_this.curInfo.sell.forEach((item,index)=>{
								_this.curInfo.sell[index].bl=(100-parseInt(item.num/sellMax*10000)/100)
							})
							_this.curInfo.buy.forEach((item,index)=>{
								_this.curInfo.buy[index].bl=(100-parseInt(item.num/buyMax*10000)/100)
							})
							this.$forceUpdate()
							console.log(_this.curInfo);
							// this.curInfo.sell buy
							// console.log(lsit1.slice(0,5));
						}else if(res.data.code ==2){
							showToast(res.data.msg)
							uni.navigateTo({
								url:"/pages/new-login/new-login"
							})
						}
					}).catch(err=>{
						// uni.hideLoading()
						_this.showLoad = false;
						console.log(err)
					})
			},
			getMax(arr){
				let max = arr[0].num;
				for(var i=0,m=arr.length;i<m;i++){
				   
				   if(arr[i].num>max){
					   max = arr[i].num
				   }
				}
				return max;
			},
			onRangeChange: function(e) {
				this.rangeValues = [e.minValue, e.maxValue];
			
				// console.log(this.rangeValues);
				// console.log(JSON.stringify(e));
			},
			selectNav(index){
				this.buyIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transaction-bottom-li-title{
		font-size: 30rpx;
		line-height: 70rpx;
		font-weight: bold;
		// border-bottom: 1rpx solid #A5ACC4;
	}
	.transaction-bottom-list{
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1rpx solid #A5ACC4;
		&:last-of-type{
			border-bottom: none;
		}
		.transaction-bottom-list-l{
			view{
				font-size: 28rpx;
				color: #666666;
			}
			text{
				font-size: 26rpx;
				color: #CDCDCD;
			}
		}
		.transaction-bottom-list-r{
			text-align: right;
			view{
				font-size: 28rpx;
				color: #666666;
			}
			text{
				font-size: 26rpx;
				color: #CDCDCD;
			}
		}
	}
.nav-bar-title{
		padding: 0 30upx;
		display: flex;
		align-items: center;
		text{
			display: block;
			flex: 1;
			font-size: 26rpx;
			&:last-of-type{
				text-align: right;
				color: #FFFFFF;
			}
		}
		view{
			flex: 1;
			text-align: center;
			font-size:30upx;
			color:#ffffff;
		}
	}
	
.trans-top{
	padding: 0 30rpx;
	.trans-top-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.trans-top-li{
			display: flex;
			align-items: center;
			&:first-of-type{
				image{
					width: 33rpx;
					height: 33rpx;
					flex-shrink: 0;
				}
			}
			text{
				font-size: 20rpx;
				margin-left: 5rpx;
				padding: 5rpx 10rpx;
				background: #FDE9EF;
				color: #E64747;
				border-radius: 4rpx;
			}
			view{
				margin-left: 20rpx;
				color: #262631;
				font-size: 36rpx;
				line-height: 100rpx;
			}
			image{
				width: 37rpx;
				height: 26rpx;
				flex-shrink: 0;
			}
		}
	}
	.trans-top-content{
		padding-bottom: 30rpx;
		display: flex;
		// align-items: center;
		.trans-top-l{
			flex: 1;
			margin-right: 72rpx;
			.trans-top-l-nav{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.trans-top-l-nav-item{
					text-align: center;
					font-size: 32rpx;
					color: #262631;
					width: 132rpx;
					line-height: 60rpx;
					height: 60rpx;
					background: #e4e6f5;
					&:first-of-type{
						border-top-left-radius: 4rpx;
						border-bottom-left-radius: 4rpx;
						position: relative;
						&::after{
							content: "";
							left: 132rpx;
							bottom: 0;
							position: absolute;
							width: 0;
							height: 0;
							border-bottom: 60rpx solid #e4e6f5;
							border-right: 60rpx solid transparent;
						}
					}
					&:last-of-type{
						position: relative;
						border-top-right-radius: 4rpx;
						border-bottom-right-radius: 4rpx;
						&::after{
							content: "";
							right: 132rpx;
							bottom: 0;
							position: absolute;
							width: 0;
							height: 0;
							border-top: 60rpx solid #e4e6f5;
							border-left: 60rpx solid transparent;
						}
					}
					&.active{
						color: #ffffff;
						&:first-of-type{
							background: #39486D;
							&::after{
								border-bottom: 60rpx solid #39486D;
							}
						}
						&:last-of-type{
							background: #E64747;
							&::after{
								border-top: 60rpx solid #E64747;
							}
						}
					}
				}
			}
			.pick-nav{
				display: flex;
				align-items: center;
				width: 340rpx;
				line-height: 60rpx;
				height: 60rpx;
				border: 1rpx solid #BED0DC;
				border-radius: 4rpx;
				margin: 20rpx 0 0;
				justify-content: space-between;
				padding: 0 14rpx;
				overflow: hidden;
				&.pick-nav-num{
					padding: 0;
					input{
						flex: 1;
						padding-left: 14rpx;
						font-size: 26rpx;
					}
				}
				&.pick-tips{
					line-height: 28rpx;
					height: 28rpx;
					font-size: 20rpx;
					color: #BED0DC;
					padding: 0;
					border: none;
				}
				view{
					color: #262631;
					font-size: 24rpx;
					line-height: 60rpx;
				}
				button{
					padding: 0;
					width: 60rpx;
					border-radius: 0;
					line-height: 60rpx;
					border: none;
					border-left: 1rpx solid #BED0DC;
					height: 60rpx;
					font-size: 28rpx;
					color: #BED0DC;
					&::after{
						display: none;
					}
				}
				.icon{
					color: #BED0DC;
				}
			}
			.sliderBox-content{
				.text-center{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						color: #BED0DC;
						font-size: 24rpx;
					}
				}
			}
			.transaction-btn{
				margin-top: 20rpx;
				button{
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					padding: 0;
					text-align: center;
					color: #ffffff;
					border-radius: 4rpx;
					&::after{
						display: none;
					}
					&.color-green{
						background: #39486D;
					}
					&.color-red{
						background: #E64747;
					}
				}
			}
		}
		.trans-top-r{
			flex: 1;
			.trans-top-r-content{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 28rpx;
				text{
					font-size: 20rpx;
					line-height: 20rpx;
					color: #555555;
				}
			}
			.trans-top-r-title{
				padding: 18rpx 0;
				view{
					color: #3FC286;
					font-size: 28rpx;
				}
				text{
					font-size: 24rpx;
					color: #555555;
				}
			}
			.trans-top-r-li{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				overflow: hidden;
				&.trans-top-r-li-buy{
					.line-bg{
						background: #ebf9f3;
					}
					text{
						font-size: 20rpx;
						line-height: 46rpx;
						color: #3FC286;
						&._black{
							color: #555555;
						}
					}
				}
				.line-bg{
					background: #fde9ef;
					position: absolute;
					top: 0;
					width: 750rpx;
					height: 46rpx;
					z-index: -1;
				}
				text{
					font-size: 20rpx;
					line-height: 46rpx;
					color: #EE2961;
					&._black{
						color: #555555;
					}
				}
			}
		}
	}

}
.transaction-bottom{
	border-top: 20rpx solid #f2f5f8;
	.transaction-bottom-title{
		display: flex;   
		align-items: center;
		border-bottom: 1rpx solid #E4E6F5;
		justify-content: space-between;
		padding: 0 30rpx;
		view{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #262631;
			line-height: 80rpx;
			text{
				font-size: 24rpx;
				color: #BED0DC;
			}
			image{
				margin-left: 12rpx;
				width: 25rpx;
				height: 22rpx;
				flex-shrink: 0;
			}
		}
	}
	.nodata{
		text-align: center;
		padding-top: 20rpx;
		image{
			width: 134rpx;
			height: 161rpx;
			flex-shrink: 0;
		}
		text{
			display: block;
			font-size: 24rpx;
			color: #BED0DC;
			&.see-more{
				color: #364a6c;
			}
		}
	}
}
</style>
